// This is the custom JavaScript file referenced by index.html. You will notice
// that this file is currently empty. By adding code to this empty file and
// then viewing index.html in a browser, you can experiment with the example
// page or follow along with the examples in the book.
//
// See README.txt for more information.
$(document).ready(function () {
    //使用attr方法修改添加属性，一般来说传入一个包含键值对的对象
   // $("div.chapter a").attr({
   //     rel:"external",
   //     title:"Learn more at Wikipedia"
   // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //利用值回调可以为每一个链接添加不同的id和title
   $("div.chapter a").attr({
       rel:"external",
       title:function () {
           return "Learn more about " + $(this).text()+"at Wikipedia";
       },
       id:function (index, oldValue) {
           return "wikilink-"+index;
       }
   });

    //理解DOM属性和HTML属性的差别
    //DOM属性只能通过JavaScript才能存取，HTML属性是指页面标记中放在引号中的值
    //读取DOM属性是通过prop()方法，可以一次性接受一个包含多个值的对象，也支持回调函数
    //但是在使用表单控件的时候，还是使用val()方法来操作比较好，可以完美的忽略attr和prop差异

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //创建新元素并将其插入到每一个段落之后

    $("<a href='#top'>back to top</a>").click(function () {
       $("<p>You were here</p>").insertAfter(this);
    }).insertAfter("div.chapter p:gt(3)");
    $("<a id='top'></a>").prependTo("body");
    /*
    * insertAfter(el)插在el的外部的后面
    * insertBefore(el)插在el的外部的前面
    * prependTo(el)插在el的内部的前面
    * appendTo(el)插在el的内部的后面
    */

   
   /* 完成5.7练习1的其他方法
    * var $paraSum = $("div.chapter p:eq(2)").nextAll();
    * $("<a href="#top">back to top</a>").click(function(){
    * $("<p>you were here</p>")}).insertAfter($paraSum);
   //  */
   // var flag  = 0;
   //  $('#f-author').on('click', function() {
   //      if (flag === 0) {
   //          $(this).wrap("<b></b>");
   //          flag = 1;
   //      }else {
   //          $(this).unwrap();
   //          flag = 0;
   //      }
   //  });
    //单击作者名字，把字体改为粗体
   var $author = $("#f-author");
   var flag = true;
   $author.click(function () {
       if(flag){
           $author.wrap("<b></b>");
           flag=false;
       }else{
           $author.unwrap("<b></b>");
           flag=true;
       }
   });

   //为正文中的每一段添加一个inhabitants类
   //  $('p').each(function(){
   //      var classes = $(this).attr('class')
   //      if(classes){
   //          classes += ' inhabitants'
   //      }else{
   //          classes = 'inhabitants'
   //      }
   //      $(this).attr('class', classes)
   //  })



    $("p").each(function () {
        var $class = $(this).attr("class");
        if($class)
            //记住inhabitants前面应该加上一个空格
            $(this).attr("class", $class+" inhabitants");
        }else{
            $(this).attr("class", "inhabitants");
        }
    })

    // $("span.footnote")
    //     .insertBefore(("#footer"))
    //     .wrapAll("<ol id='notes'></ol>")
    //     .wrap("<li></li>");
    //依赖了隐式迭代
    //对比insertAfter看是否是正确的顺序被插入
    //使用wrapAll和wrap来包裹脚注内容

    //使用显式迭代器each,类似于原生javascript中的数组迭代器forEach
    //谨记先添加至ol中，再将其封装至li中
    // var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");
    // $("span.footnote").each(function (index) {
    //     $("<sup>"+(index+1)+"</sup>").insertBefore(this);
    //     $(this).appendTo($notes).wrap("<li></li>");
    // });

    //使用jquery的连缀方法更为简洁，代码也更少
    // var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");
    // $("span.footnote").each(function (index) {
    //     $(this)
    //         .before("<sup>"+(index+1)+"</sup>")
    //         .appendTo($notes)
    //         .wrap("<li></li>");
    // });
    //insertBefore()存在一个反向方法before()
    //a.insertBefore(b)指a插在b前面
    //a.before(b)指b插在a前面

    var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");
    $("span.footnote").each(function (index) {
        $(this)
            .before([
                '<a href="#footnote-',
                index+1,
                '" id="context-',
                index+1,
                '" class="context">',
                '<sup>',
                index+1,
                "</sup></a>"
            ].join(''))
            .appendTo($notes)
            .append([
                '&nbsp;(<a href="#context-',
                index+1,
                '">context</a>)'
            ].join(''))
            .wrap('<li id="footnote-' +(index+1)+ '"></li>');
    });
    $("span.pull-quote").each(function (index) {
        var $parent = $(this).parent("p");//找到被引用段落的父元素段落
        $parent.css("position", "relative");//保证父元素的定位不是static才可以移动子元素
        var $clonepara = $(this).clone();
        $clonepara
            .addClass("pulled")
            .find("span.drop")
            .html("&hellip;")
            .end()
            .text($clonepara.text())
            .prependTo($parent);
    });



});